<template>
    <div>
        <a-button class="editable-add-btn" @click="handleAdd">
            添加列
        </a-button>
        <a-button class="editable-add-btn" @click="getAllData">
            获取数据
        </a-button>
        <a-table rowKey="sn" bordered :data-source="dataSource" :columns="columns" :pagination="false">
            <template slot="fieldName" slot-scope="text, record">
                <a-input :value=record.fieldName @change="onCellChange(record.sn, 'fieldName', $event.target.value)"/>
            </template>
            <template slot="fieldDesc" slot-scope="text, record">
                <a-input :value=record.fieldDesc @change="onCellChange(record.sn, 'fieldDesc', $event.target.value)"/>
            </template>
            <template slot="fieldType" slot-scope="text, record">
                <a-select v-model="record.fieldType" @change="onCellChange(record.sn, 'fieldType', $event)" style="width: 100px;">
                    <a-select-option value="varchar">字符串</a-select-option>
                    <a-select-option value="number">数字</a-select-option>
                    <a-select-option value="date">日期</a-select-option>
                    <a-select-option value="clob">大文本</a-select-option>
                </a-select>
            </template>
            <template slot="charLen" slot-scope="text, record">
                <a-input :value=record.charLen @change="onCellChange(record.sn, 'charLen', $event.target.value)"/>
            </template>
            <template slot="intLen" slot-scope="text, record">
                <a-input :value=record.intLen @change="onCellChange(record.sn, 'intLen', $event.target.value)"/>
            </template>
            <template slot="decimalLen" slot-scope="text, record">
                <a-input :value=record.decimalLen @change="onCellChange(record.sn, 'decimalLen', $event.target.value)"/>
            </template>
            <template slot="defaultValue" slot-scope="text, record">
                <a-input :value=record.defaultValue @change="onCellChange(record.sn, 'defaultValue', $event.target.value)"/>
            </template>
            <template slot="isPrimaryKey" slot-scope="text, record">
                <a-checkbox :defaultChecked="record.isPrimaryKey==1" @change="onCellChange(record.sn, 'isPrimaryKey', $event.target.checked)" :disabled="record.fieldName=='id'"></a-checkbox>
            </template>
            <template slot="isRequired" slot-scope="text, record">
                <a-checkbox :defaultChecked="record.isRequired==1" @change="onCellChange(record.sn, 'isRequired', $event.target.checked)" :disabled="record.fieldName=='id'"></a-checkbox>
            </template>
            <template slot="operation" slot-scope="text, record">
                <a-popconfirm
                        v-if="dataSource.length"
                        title="确定删除吗?"
                        @confirm="() => onDelete(record.sn)"
                >
                    <a href="javascript:;">删除</a>
                </a-popconfirm>
            </template>
        </a-table>
    </div>
</template>
<script>

    export default {
        components: {
        },
        data() {
            return {
                count: 2,
                dataSource: [
                    {
                        sn: '1',
                        fieldName: 'id',
                        fieldDesc: '表示id',
                        fieldType: 'number',
                        charLen: '',
                        intLen: '18',
                        decimalLen: '',
                        defaultValue: '',
                        isPrimaryKey: 1,
                        isRequired: 1,
                    },
                ],
                columns: [
                    {
                        title: '排序',
                        dataIndex: 'sn',
                        width:"60px"
                    },
                    {
                        title: '字段名称',
                        dataIndex: 'fieldName',
                        scopedSlots: { customRender: 'fieldName' },
                    },
                    {
                        title: '字段描述',
                        dataIndex: 'fieldDesc',
                        scopedSlots: { customRender: 'fieldDesc' },
                    },
                    {
                        title: '字段类型',
                        dataIndex: 'fieldType',
                        scopedSlots: { customRender: 'fieldType' },
                        width:"200px"
                    },
                    {
                        title: '字段长度charLen',
                        dataIndex: 'charLen',
                        scopedSlots: { customRender: 'charLen' },
                    },
                    {
                        title: '字段长度',
                        dataIndex: 'intLen',
                        scopedSlots: { customRender: 'intLen' },
                    },
                    {
                        title: '小数长度',
                        dataIndex: 'decimalLen',
                        scopedSlots: { customRender: 'decimalLen' },
                    },
                    {
                        title: '默认值',
                        dataIndex: 'defaultValue',
                        scopedSlots: { customRender: 'defaultValue' },
                    },
                    {
                        title: '主键',
                        dataIndex: 'isPrimaryKey',
                        scopedSlots: { customRender: 'isPrimaryKey' },
                        width:"60px"
                    },
                    {
                        title: '必填',
                        dataIndex: 'isRequired',
                        scopedSlots: { customRender: 'isRequired' },
                        width:"60px"
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        scopedSlots: { customRender: 'operation' },
                        width: "200px"
                    },
                ],
            };
        },
        methods: {
            onCellChange(sn, dataIndex, value) {
                console.log(value+"-----"+typeof value)
                if(typeof value === 'boolean'){
                    if(value==true){
                        value=1;
                    }
                    if(value==false){
                        value=2;
                    }
                }
                const dataSource = [...this.dataSource];
                const target = dataSource.find(item => item.sn === sn);
                if (target) {
                    target[dataIndex] = value;
                    this.dataSource = dataSource;
                }
            },
            onDelete(sn) {
                const dataSource = [...this.dataSource];
                this.dataSource = dataSource.filter(item => item.sn !== sn);
            },
            handleAdd() {
                const { count, dataSource } = this;
                const newData ={
                    sn: count,
                    fieldName: '字段名称',
                    fieldDesc: '字段描述',
                    fieldType: 'varchar',
                    charLen: '200',
                    intLen: '',
                    decimalLen: '',
                    defaultValue: '',
                    isPrimaryKey: 0,
                    isRequired: 0,
                };
                this.dataSource = [...dataSource, newData];
                //this.dataSource.splice(1, 1,newData);
                this.count = count +1;
            },
            getAllData(){
                console.log(this.dataSource);
                return this.dataSource;
            },
            onChange(e) {
                console.log(`checked = ${e.target.checked}`);
            },
        },
    };
</script>
<style scoped>

</style>
